<!--
 * @Description: 服务产品页面
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: 何梦龙
 * @LastEditTime: 2022-05-16 22:00:59
-->
<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
  title="服务产品"
  left-text="返回"
  left-arrow
  @click-left="$router.back()"
/>

<!-- 产品展示 -->
<div>
  <van-row>
    <van-col span="5" >
      <!-- {{activeKey}} -->
      <van-sidebar v-model="activeKey" @change="onChange">
      <van-sidebar-item v-for="item in categoryData" :key="item.id" :title="item.name" />
      </van-sidebar>
    </van-col>

    <van-col span="19">
      <van-card v-for="item in productByCategoryData"
       :key="item.id"
  :price="item.price"
  :desc="item.description"
  :title="item.name"
  :thumb="item.photo"
>
  
  <template #footer>
    <!-- 步进器 -->
    <!-- {{item.num}} -->
    <van-stepper default-value="0" min="0" v-model="item.num" 
    @change="stepperChange"
    />
  </template>
</van-card>
</van-col>
</van-row>
</div>

<!-- 购物车 -->
    <van-submit-bar :price="totalPrice*100" button-text="提交订单"
     @submit="$router.push('orderConfirm')"
      />
    
    <!-- 服务产品
    <button @click="$router.push('orderConfirm')">提交订单，跳转到订单确认页面</button> -->
  </div>
</template>

<script>
import {pageQueryProductCategory,pageQueryProduct} from "@/api/index.js";
export default {
  data() {
    return {
      //当前导航项目的索引
      activeKey: 1,
      //产品分类数据
      categoryData:[],
      //所有产品的数据
      productDataTotal:[],
      //分类对应的产品
      productByCategoryData:[],
      //步进器提供的值
      // value: 0,
      //购物车总价格
      totalPrice:0,
    };
  },
  computed: {},
  methods: {
    //侧边导航发生变化
     onChange(index) {
      // console.log(index);
      console.log(this.categoryData[index].id);
      this.productByCategoryData=this.productDataTotal.filter((item)=>{
        return item.category.id==this.categoryData[index].id;
      });
      // console.log(temp);
    },
    
    //步进器发生变化，计算总价
    stepperChange(){
       //从当前产品数组中，过滤出来产品数量大于0的
       let temp=this.productDataTotal.filter((item)=>{
         return item.num>0;
       });
      //  console.log(temp);
      let total=0;
      temp.forEach((item)=>{
        total=total+item.num*item.price
      });
      // console.log(total);
      this.totalPrice=total;
    },

    async loadCategory(){
      let res=await pageQueryProductCategory({page:1,pageSize:100});
      this.categoryData=res.data.data.list;
      //获取上个页面带过来的参数
      console.log(this.$route.query.id);
      this.categoryData.forEach((item,index)=>{
        if(item.id==this.$route.query.id){
          this.activeKey=index;
        }
      } );
      this.loadProduct();

    },

    async loadProduct(){
      let res=await pageQueryProduct({page:1,pageSize:1000});
      this.productDataTotal=res.data.data.list;
      //过滤获取当前默认选中的分类下的产品
      this.productByCategoryData=this.productDataTotal.filter((item)=>{
        return item.category.id==this.$route.query.id;
      });
    },

  },
  created() {
    this.loadCategory();
    
  },
  mounted() {}
};
</script>
<style scoped>
.van-submit-bar {
  bottom: 50px;
}


</style>